<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>XXX医院管理系统</title>
	<meta charset="UTF-8">

    <script type="text/javascript" th:src="@{/Hospital/Js/jquery.js}"></script>
    <!--<script type="text/javascript" src="Js/jquery.sorted.js"></script>-->
    <script type="text/javascript" th:src="@{/Hospital/Js/bootstrap.js}"></script>
    <script type="text/javascript" th:src="@{/Hospital/Js/ckform.js}"></script>
    <script type="text/javascript" th:src="@{/Hospital/Js/common.js}"></script>
    <!--<script th:src="@{/Hospital/Js/jquery-1.11.1.js}"></script>-->
    <script th:src="@{/Hospital/layer/layer.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/Hospital/Css/bootstrap.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/Hospital/Css/bootstrap-responsive.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/Hospital/Css/style.css}" />
    <style type="text/css">
        body {
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #f5f5f5;
        }

        .form-signin {
            max-width: 300px;
            padding: 19px 29px 29px;
            margin: 0 auto 20px;
            background-color: #fff;
            border: 1px solid #e5e5e5;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
            -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
        }

        .form-signin .form-signin-heading,
        .form-signin .checkbox {
            margin-bottom: 10px;
        }

        .form-signin input[type="text"],
        .form-signin input[type="password"] {
            font-size: 16px;
            height: auto;
            margin-bottom: 15px;
            padding: 7px 9px;
        }

    </style>  
</head>
<body>
<div class="container">

    <form class="form-signin">
        <h2 class="form-signin-heading">&nbsp;&nbsp;&nbsp;登录系统</h2>
        <input type="text" name="username" id="username" class="input-block-level" placeholder="账号">
        <input type="password" name="password" id="password" class="input-block-level" placeholder="密码">
        <input type="text" name="verify" class="input-medium" id="getCode" placeholder="验证码"/><span id="showCode">&nbsp;&nbsp;&nbsp;----&nbsp;&nbsp;&nbsp;</span>
        <button id="code" type="button">获取验证码</button>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="btn btn-large btn-primary" type="button" id="login">登录</button></p>
    </form>

</div>
</body>
</html>
<script>
    //生成验证码
    $(function (){
        $("#code").click(function (){
            //先使用layer,弹出load（提示加载中...）
            const windowId = layer.load();//获取加载框
            $.post("getCode",null,function (data){
                //关闭load窗口
                layer.close(windowId);
                //将服务器回复的结果进行显示
                layer.msg(data.msg);

                //显示后台生成的验证码
                $("#showCode").text(data.obj);

            });

        })

    });

    //登录跳转
    $(function (){
        $("#login").click(function (){
            //先使用layer,弹出load（提示加载中...）
            //获取加载框
            const windowId = layer.load();
            let loginName = $("#username").val();
            let passWord = $("#password").val();
            //获取表单输入的验证码的内容
            let code = $("#getCode").val();
            //获取前端显示的验证码内容
            let showCode = $("#showCode").text();


            //判断输入的是否和显示的验证码一致
            if (code === showCode){
                $.ajax({
                    type:"POST",
                    url:"login",
                    data:{loginName:loginName,passWord:passWord},
                    dataType:"json",
                    success:function (data){
                        //关闭load窗口
                        layer.close(windowId);
                        //将服务器回复的结果进行显示
                        layer.msg(data.msg);

                        if (data.status === 1){
                            $(window).attr("location","index");
                        }
                    }

                });
            }else {
                //提示获取验证码
                if (showCode.trim() === "----"){
                    layer.msg("请点击获取验证码！")
                    layer.close(windowId);
                }

                //验证不一致时
                if(showCode.trim() !== '----'){
                    layer.msg("验证码输入不正确！")
                    layer.close(windowId);
                }

                //输入框条件不满足登录条件的判断
                if (loginName === '' || passWord === ''){
                    layer.msg("用户名或密码不能为空！")
                    layer.close(windowId);


                }
                //当验证码为空时
                if(loginName !== '' && passWord !== '' && code === ''){
                    layer.msg("验证码不能为空！")
                    layer.close(windowId);
                }
            }

        })

    });
</script>